<template>
    <div class="order">
        <van-nav-bar title="确认订单" left-arrow @click-left="onClickLeft" />
        <div class="order_list">
            <div class="order-box" v-for="item in cartlist.list" :key="item.order_id">
                <div class="order-img">
                    <!-- <img :src="`https://images.weserv.nl/?url=${item.order_img}`" alt="" /> -->
                    <img :src="item.order_img" alt="" />
                </div>
                <div class="order-detail">
                    <div class="title-box">
                        <div class="order-name">
                            <p class="name">{{ item.order_name }}</p>
                            <div class="order-style">
                                <p class="color">
                                    颜色:<span>{{ item.order_color }}</span>
                                </p>
                                <p class="size">
                                    尺码:<span>{{ item.order_size }}</span>
                                </p>
                            </div>
                        </div>
                        <div class="order-num">
                            <p>×{{ item.order_num }}</p>
                        </div>
                    </div>
                    <div class="price-box">
                        <p>￥{{ item.order_price }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="address_box">
            <div v-if="addr_name.length == 0" class="address_null">
                <p @click="show = true">+请添加收货地址...</p>
            </div>
            <div v-else class="address_add">
                <div class="left">
                    <p class="name">
                        收货人: {{ addr_name }} <span>电话:{{ addr_phone }}</span>
                    </p>
                    <p class="addrs">收获地址：{{ addr_detail }}</p>
                </div>
                <div class="right">
                    <p @click="show = true">更换地址</p>
                </div>
            </div>
        </div>
        <div class="xian"></div>
        <div class="compute_box">
            <div class="all-price">
                <p class="title">商品总价</p>
                <p class="price">￥{{ totalPrice }}</p>
            </div>
            <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
            <!-- 优惠券列表 -->
            <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px">
                <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" @change="onChange" @exchange="onExchange" />
            </van-popup>
        </div>
        <van-submit-bar :price="totalPrice * 100" button-text="提交订单" @submit="onSubmit" />

        <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }" closeable @click-overlay="onClickOverlay" @click-close-icon="onClickCloseIcon">
            <p class="p-address">选择收货地址:</p>
            <ul class="address_list">
                <li class="address_con" v-for="item in addresslist.list" :key="item.address_id" @click="getAddr(item)">
                    <p class="address-top">
                        <span class="name">{{ item.address_name }}</span>
                        <span class="phone">{{ item.address_phone }}</span>
                    </p>
                    <p class="address">{{ item.address_province + item.address_city + item.address_county + item.address_detail }}</p>
                </li>
            </ul>
        </van-popup>
    </div>
</template>

<script lang="ts" setup>
import { getShoppingCart, getAddress, addOrder, removeCart, getOrder } from "../../api/index";
import { ref, reactive, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast } from "vant";

let router = useRouter();
let route = useRoute();

//购物车列表
let cartlist = reactive({
    list: [],
});

const show = ref(false);

let addr_phone = ref("");
let addr_name = ref("");
let addr_detail = ref("");

//地址列表
let addresslist = reactive({
    list: [],
});

//计算总价
const totalPrice = computed(() => {
    let amountAll = 0;
    cartlist.list.forEach((item: any) => {
        let amount = item.order_price * item.order_num;
        amountAll += amount;
    });
    return amountAll.toFixed(2);
});

const getAddr = (item: any) => {
    // console.log(11);
    addr_phone.value = item.address_phone;
    addr_name.value = item.address_name;
    addr_detail.value = item.address_province + item.address_city + item.address_county + item.address_detail;
    show.value = false;
};

getOrder({ order_status: 1 }).then((res: any) => {
    let { content } = res;
    cartlist.list = content;
    // console.log(cartlist);
});

getAddress().then((res: any) => {
    let { result } = res;
    addresslist.list = result;
    console.log(addresslist.list);
});

const onClickOverlay = () => {
    // showToast("click-overlay");
};
const onClickCloseIcon = () => {
    // showToast("click-close-icon");
};

//优惠卷信息
const coupon = {
    available: 1,
    condition: "无门槛\n最多优惠12元",
    reason: "",
    value: 150,
    name: "优惠券名称",
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: "1.5",
    unitDesc: "元",
};
const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);

const onClickLeft = () => history.back();

const onSubmit = () => {
    if (addr_detail.value == "") {
        showToast("请添加收货地址");
        return;
    }
    cartlist.list.forEach((item: any, index: number) => {
        // cartlist.list[index].order_status = 2;
        let data = {
            order_id: item.order_id,
            // order_name: item.order_name,
            // order_price: item.order_price,
            // order_img: item.order_img,
            // order_color: item.order_color,
            // order_size: item.order_size,
            // order_num: item.order_num,
            order_status: 2,
            order_phone: addr_phone.value,
            order_addr: addr_detail.value,
            order_user: addr_name.value,
        };

        addOrder(data).then((res: any) => {
            // console.log(res);

            if (res.code == 200) {
                router.replace({
                    name: "myorder",
                });
            }
        });
    });
};

const onChange = (index) => {
    showList.value = false;
    chosenCoupon.value = index;
};
const onExchange = (code) => {
    coupons.value.push(coupon);
};
</script>

<style lang="scss" scoped>
.order_list {
    width: 100%;
}
.order-box {
    // border-top: 1px solid #353535;
    // border-bottom: 1px solid #000;
    // margin-bottom: 10px;
    margin: 5px 10px 5px;
    width: 95%;
    background: #f0f0f0;
    padding: 10px;
    display: flex;
    border-radius: 5px;

    .order-img {
        width: 69px;
        // width: 35%;
        height: 85px;
        img {
            border-radius: 5px;
            width: 100%;
            height: 100%;
        }
    }

    .order-detail {
        flex: 1;
        padding: 5px 5px;
        margin-left: 5px;
        background: #fff;
        border-radius: 5px;

        .title-box {
            display: flex;
            .order-name {
                width: 90%;
                .name {
                    width: 100%;
                    height: 38px;
                    font-size: 14px;
                }

                .order-style {
                    // padding-top: 5px;
                    display: flex;
                    .color,
                    .size {
                        font-size: 12px;
                        color: #999;
                        padding-right: 10px;
                    }
                }
            }
            .order-num {
                padding: 25px 0 0 10px;
                font-size: 14px;
                color: #999;
            }
        }

        .price-box {
            p {
                font-size: 16px;
                color: #c7273a;
                // padding-top: 5px;
            }
        }
    }
}
.address_box {
    display: flex;
    align-items: center;
    margin-top: 20px;
    width: 100%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc 15px, white 0, white 20px);
    height: 70px;

    .address_null {
        line-height: 70px;
        margin: 0 auto;
        // text-align: center;
        p {
            font-size: 14px;
            color: #999;
        }
    }
    .address_add {
        padding: 0 15px;
        width: 100%;
        display: flex;
        align-items: center;

        .left {
            width: 80%;
        }
        .right {
            width: 20%;
            text-align: right;

            p {
                font-size: 12px;
                color: #999;
                padding: 0;
            }
        }
        p {
            font-size: 12px;
            color: #353535;
        }
        .name {
            padding-bottom: 5px;
        }
        .addrs {
            height: 32px;
        }
    }
}
.xian {
    width: 100%;
    height: 10px;
    background: #f0f0f0;
    margin-top: 30px;
}
.compute_box {
    // margin-top: 30px;
    border-top: 1px solid #f0f0f0;
    // border-bottom: 1px solid #f0f0f0;
    padding: 10px 0;
    width: 100%;
    .all-price {
        margin: 0 15px;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;

        .title {
            font-size: 14px;
            color: #313131;
        }
        .price {
            padding-right: 5px;
            font-size: 14px;
            color: #c7273a;
        }
    }
}
.p-address {
    position: absolute;
    top: 10px;
    left: 20px;
    color: #353535;
    font-size: 14px;
}
.address_list {
    width: 100%;
    margin-top: 40px;
    padding: 10px 15px 0;
    .address_con {
        border-radius: 5px;
        box-sizing: border-box;
        padding: 15px 15px;
        margin-bottom: 10px;
        background: #f9f9f9;
        .name {
            padding-right: 10px;
            font-size: 16px;
            color: #353535;
            span {
                padding-left: 10px;
            }
        }
        .phone {
            font-size: 16px;
            color: #353535;
        }
        .address {
            padding-top: 5px;
            span {
                font-size: 14px;
                color: #353535;
            }
            font-size: 13px;
            color: #353535;
        }
    }
}

:deep(.van-nav-bar) {
    background: #353535;
}
:deep(.van-nav-bar__title) {
    color: #fff;
    font-weight: normal;
}
:deep(.van-nav-bar .van-icon) {
    color: #fff;
}
:deep(.van-submit-bar__bar) {
    border-top: 1px solid #f0f0f0;
}
:deep(.van-submit-bar__price) {
    color: #c7273a;
}
:deep(.van-button--danger) {
    background: #353535;
}
</style>
